import React, { Component } from 'react';
import service from '../../api'
// import { store } from '../../store';
import './Address.scss'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom';
// import { areaList } from '@vant/area-data';
import { Button, Form, Input, Switch, Cascader, Toast } from 'antd-mobile';
import area from '../../utils/area';
class Address extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            visible: false,
            // value: '',
            show: false,
            // address: {},
            arrValue: []
        }
    }
    async componentDidMount() {
        // store.subscribe()
        // console.log(this.props.location.state)
        var userid = localStorage.getItem('userid')
        if (this.props.location.state && this.props.location.state.addressid) {
            this.setState({
                show: true
            })
            await service.address.getAddressList({ userid }).then(res => {
                if (res.data.code == '200') {
                    // var arr = res.data.data
                    // var address = arr.find((item: any) => item.addressid === this.props.location.state.addressid)
                    // console.log(address)
                    this.setState({
                        // address,
                        // value: address.province + "/" + address.city + '/' + address.county
                    })
                }
            })
        }
        console.log(this.props.addressid)
    }

    onFinish(value: any) {
        console.log(value)
        console.log(this.state.arrValue)
        value.userid = localStorage.getItem('userid')
        value.province = this.state.arrValue[0]
        value.city = this.state.arrValue[1]
        value.county = this.state.arrValue[2]
        if (this.props.location.state && this.props.location.state.addressid) {
            value.addressid = this.props.location.state.addressid
            service.address.addressUpdate(value).then(res => {
                if (res.data.code === '200') {
                    service.address.getAddressList({ userid: localStorage.getItem('userid') }).then(res => {
                        var arr = res.data.data
                        var item = arr.find((item: any) => item.addressid == value.addressid)
                        if (item !== this.props.address) {
                            this.props.changeaddress(item)
                        }
                    })
                    Toast.show({
                        content: '更新地址接口成功'
                    })
                    setTimeout(() => {
                        if (this.props.location.state) {
                            this.props.history.replace({ pathname: '/addresslist', state: { time: this.props.location.state.time } })
                        }
                        else {
                            this.props.history.replace('addresslist')
                        }
                    }, 1000)
                }
                else {
                    Toast.show({
                        content: '更新地址接口失败'
                    })
                }
            })
        }
        else {
            service.address.addressAdd(value).then(res => {
                if (res.data.code === '200') {
                    Toast.show({
                        content: '新增地址成功'
                    })
                    setTimeout(() => {
                        if (this.props.location.state) {
                            this.props.history.replace({ pathname: '/addresslist', state: { time: this.props.location.state.time } })
                        }
                        else {
                            this.props.history.replace('addresslist')
                        }

                    }, 1000)
                }
            })
        }
    }
    onVisble() {
        this.setState({
            visible: true
        })
    }
    delAddress() {
        service.address.addressDel({ addressid: this.props.addressid }).then(res => {
            if (res.data.code === '200') {
                Toast.show({
                    content: '删除地址成功'
                })
                this.props.del()
                this.props.deladdress()
                setTimeout(() => {
                    if (this.props.location.state) {
                        this.props.history.replace({ pathname: '/addresslist', state: { time: this.props.location.state.time } })
                    }
                    else {
                        this.props.history.replace('addresslist')
                    }
                }, 1000)
            }
        })
    }
    async onConfirm(value: any, extend: any) {
        console.log(value, extend)
        await this.setState({
            visible: false,
            arrValue: value
        })
    }
    render() {
        return (
            <div className='address'>
                <Form
                    initialValues={this.props.location.state && this.props.location.state.addressid ? this.props.address : {}}
                    onFinish={(val) => { this.onFinish(val) }}
                    layout='horizontal'
                    footer={
                        <Button block type='submit' shape='rounded' color='primary' size='large'>
                            保存
                        </Button>
                    }
                >
                    <Form.Item
                        name='name'
                        label='姓名'
                        rules={[{ required: true, message: '姓名不能为空' }]}
                    >
                        <Input placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item
                        name='tel'
                        label='手机号'
                        rules={[
                            { required: true, message: '手机号不能为空' },
                            { pattern: /^1[34578]\d{9}$/, message: '请输入正确手机号' }
                        ]}
                    >
                        <Input placeholder='请输入手机号' />
                    </Form.Item>
                    <Form.Item
                        label='地区'
                        onClick={this.onVisble.bind(this)}
                    >
                        <Cascader
                            options={area.options}
                            visible={this.state.visible}
                            onClose={() => { }}
                            onConfirm={(value, extend) => { this.onConfirm(value, extend) }}
                        >
                            {items => {
                                if (this.props.location.state && this.props.location.state.addressid && this.state.arrValue.length === 0) {
                                    return <Input placeholder='地区' value={this.props.area} />
                                }
                                else if (items.every(item => item === null)) {
                                    return <Input value='未选择' />
                                }
                                else {
                                    return <Input placeholder='地区' value={items.map(item => item?.label ?? '未选择').join('/')} />
                                }
                            }}
                        </Cascader>
                    </Form.Item>
                    <Form.Item
                        name='addressDetail'
                        label='详细地址'
                    >
                        <Input placeholder='详细地址' />

                    </Form.Item>

                    <Form.Item
                        name='isDefault'
                        label='设为默认收货地址'
                        childElementPosition='right'
                    >
                        <Switch defaultChecked={this.props.address.isDefault} />
                    </Form.Item>
                </Form>
                {
                    this.state.show ? <Button onClick={this.delAddress.bind(this)} fill='outline' shape='rounded' style={{ width: '93%' }}>删除地址</Button> : <></>
                }
            </div>
        );
    }
}

export default connect(
    (state: any) => {
        return {
            addressid: state.addressid,
            address: state.address,
            area: state.area
        }
    },
    (dispatch) => {
        return {
            change: function (data: string) {
                dispatch({
                    type: 'CHANGE',
                    data
                })
            },
            del: function () {
                dispatch({
                    type: 'DEL'
                })
            },
            deladdress: function () {
                dispatch({
                    type: 'DELADDRESS'
                })
            },
            changeaddress: function (data:any) {
                dispatch({
                    type: 'CHANGEADDRESS',
                    data
                })
            }
        }
    }
)(withRouter(Address));